<template>
    <vp-dialog ref="editDialogRef" :span="1">
        <template #title>
            <vp-label zh="新增" en="Add" align="left"/>
        </template>
        <el-form label-suffix=":"  :model="formData" :rules="formRules" ref="formRef" label-width="120px">
            <el-row>
                <vp-col :span="1">
                    <el-form-item  prop="id">
                        <template #label><vp-label zh="Key" en="key" align="left"/></template>
                        <el-input v-model="formData.id" v-trim maxlength="50"></el-input>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item :label="$t('workflow.model.name')" prop="name">
                        <template #label><vp-label zh="名称" en="Name" align="left"/></template>
                        <el-input v-model="formData.name" v-trim maxlength="100"></el-input>
                    </el-form-item>
                </vp-col>
            </el-row>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts"  name="AddModeler">
import { reactive, ref, toRefs } from 'vue';
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils';

const emits = defineEmits<{
    (e: 'formSubmited'): void
}>()

const data = reactive({
    formData: {
        id: "",
        name: "",
    },
    formRules: {
        id: [
            validateUtils.notNull,
            validateUtils.notChinese,
            validateUtils.startWithEn,
        ],
        name: [
            validateUtils.notNull,
        ]
    },
    saveLoading: false,
})
const { formData, formRules, saveLoading } = toRefs(data);
const editDialogRef = ref();
const formRef = ref();
const handleSave = ()=>{
    data.saveLoading = true;
    formRef.value.validate((valid: boolean)=>{
        if(valid){
            request.post("/workflow/modeler/create", data.formData).then(()=>{
                emits("formSubmited");
                editDialogRef.value.handleClose();
            }).catch(()=>{
            }).finally(()=>{
                data.saveLoading = false;
            })
        }else{
            data.saveLoading = false;
        }
    })
}

const handleOpen = ()=>{
    data.formData = {
        id: "",
        name: "",
    }
    editDialogRef.value.handleOpen();
}

defineExpose({
    handleOpen,
})

</script>
<style scoped lang="scss">

</style>